<script setup lang='ts'>
import {computed, CSSProperties} from 'vue'
const props = defineProps({
  clientX:{
    type:Number,
    required:true
  },
  clientY:{
    type:Number,
    required:true
  }
})

const emits = defineEmits(['closeOthers', 'reload'])

const bubbleStyle = computed(() => {
  const style:CSSProperties = {left:props.clientX + 'px', top:props.clientY + 'px'}
  return style
})

const onCloseOthers = () => {
  emits('closeOthers')
}

const onReload = () => {
  emits('reload')
}
</script>

<template>
  <div class="home-tabs-bubble__wapper" :style="bubbleStyle">
    <ul class="home-tabs-bubble">
      <li class="home-tabs-bubble-item d-common-text-main" @click.stop="onCloseOthers">
        关闭其他
      </li>
      <li class="home-tabs-bubble-item d-common-text-main" @click.stop="onReload">
        重新加载
      </li>
    </ul>
  </div>
</template>

  <style scoped>
  .home-tabs-bubble__wapper{
    position:fixed;
    width: 100px;
    background-color: var(--d-color-white);
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
    border-radius: var(--d-border-radius-level-2);
    z-index: 2001;
  }
  .home-tabs-bubble{
    list-style: none;
    padding: 0;
    margin: calc(var(--d-margin-level-1) - 3px) 0;
  }
  .home-tabs-bubble-item{
    height: 32px;
    padding: 5px 10px;
    text-align: center;
  }
  .home-tabs-bubble-item:hover{
    background-color: var(--theme-color-light-5);
    cursor: pointer;
  }
  </style>